<template>
  <div class="app-container">

    <!-- 添加或修改返修退料对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
      <div id="printArea">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="退料单号" prop="orderCode">
              <el-input v-model="form.orderCode" placeholder="请输入退料单号" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="退料单名称" prop="orderName">
              <el-input v-model="form.orderName" placeholder="请输入退料单名称"  disabled/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="返修工单" prop="repairCode">
              <el-input v-model="form.repairCode" placeholder="请输入返修工单" disabled/>

            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="退料日期" prop="orderDate">
              <el-date-picker clearable  style="width: 100%"  disabled
                              v-model="form.orderDate"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择退料日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
        <div class="divider">
          <span class="label">物料信息</span>
        </div>
<!--      打印-->
      <el-card shadow="always" v-if="form.orderId !=null"  class="box-card">
        <print-line ref="printline" :order-id="form.orderId" ></print-line>
      </el-card>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="print" v-if="optType != 'print'">打印</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getReturn,
  listRequisition
} from "@/api/mes/rr/return";
import RepairSelect from "./repairselect.vue"
import {genCode} from "@/api/system/autocode/rule";
import PrintLine from "@/views/mes/rr/rreturn/printline";
import printJS from "print-js";

export default {
  name: "Requisition",
  components: {PrintLine,RepairSelect},
  dicts: ['mes_order_status'],
  data() {
    return {
      optType:undefined,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 返修退料表格数据
      requisitionList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,orderId: null,
        orderCode: null,        orderName: null,        repairCode: null,        tenantId: null      },
      // 表单参数
      form: {
        lineList:[]
      },
      // 表单校验
      rules: {
        orderCode: [
          { required: true, message: "退料单编号不能为空", trigger: "blur" }
        ],
        orderName: [
          { required: true, message: "退料单名称不能为空", trigger: "blur" }
        ],
        repairCode: [
          { required: true, message: "返修单不能为空", trigger: "blur" }
        ],
        orderDate: [
          { required: true, message: "退料日期不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    // this.getList();
  },
  methods: {
    init(orderId){
      this.open = true;
      this.getInfo(orderId)
    },
    /** 查询返修退料列表 */
    getInfo(orderId) {
      this.reset();
      this.loading = true;
      getReturn(orderId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "返修退料预览";

      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    print() {
      printJS({
        type: 'html',
        printable: 'printArea',
        documentTitle: '返修退料单',
        header: '返修退料单',
        // 写入自定义样式
        headerStyle: 'text-align:center;width:100%;margin-top:5px;font-weight: 300;',
        style: `@page {
                    size: A4 landscape !important; /* 强制 A4 横向 */
                    margin: 2.5cm 1cm 2.5cm 1cm !important; /* 上右下左边距 */
                }
                @media print {
                    body {
                        -webkit-print-color-adjust: exact !important; /* 让颜色更准确 */
                        print-color-adjust: exact !important;
                    }
                     .section {
                      break-inside: avoid !important;
                  }
                }

                .divider {
                  display: flex; /* 使用Flexbox布局 */
                  align-items: center; /* 垂直居中对齐 */
                  margin: 20px 0; /* 上下外边距 */
                }

                .divider::before,
                .divider::after {
                  content: ""; /* 伪元素内容为空 */
                  flex: 1; /* 伸展占据剩余空间 */
                  border-top: 1px solid #d3d3d3; /* 灰色的上边线 */
                }
                .label {
                  display: flex;
                  padding: 10px 10px !important;
                  border: 1px solid #d3d3d3; /* 蓝色边框 */
                  border-radius: 10px; /* 圆角 */
                  background-color: #fff; /* 白色背景 */
                  color: #1b9aee; /* 蓝色字体 */
                  font-family: "苹方 常规", "苹方", sans-serif;
                  font-weight: 700;
                  font-style: normal;
                  font-size: 24px;
                  text-align: center;
                  line-height: 20px;
                }
                .noprint{
                  display:none !important;
                }`,
        scanStyles: true,
        // 继承样式
        targetStyles: ['*'],
        maxWidth: 1960
      });
    },

    // 表单重置
    reset() {
      this.form.lineList=[]
      this.form = {
        orderId: null,        orderCode: null,        orderName: null,        repairId: null,
        repairCode: null,        orderDate: null,        status: 'PREPARE',
        applicantUserId: null,        applicantUserName: null,        deptId: null,        deptName: null,
        remark: null,        createTime: null,        createBy: null,        createByName: null,
        updateTime: null,        updateBy: null,        tenantId: null      };
      this.resetForm("form");
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },




  }
};
</script>
<style scoped>
.divider {
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中对齐 */
  margin: 20px 0; /* 上下外边距 */
}

.divider::before,
.divider::after {
  content: ''; /* 伪元素内容为空 */
  flex: 1; /* 伸展占据剩余空间 */
  border-top: 1px solid #d3d3d3; /* 灰色的上边线 */
}

.label {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #d3d3d3; /* 蓝色边框 */
  border-radius: 10px; /* 圆角 */
  background-color: #fff; /* 白色背景 */
  color: #1b9aee; /* 蓝色字体 */
  font-family: '苹方 常规', '苹方', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  text-align: center;
  line-height: 20px;
}

.product-audit {
  height: 130px;
  margin: -30px 20px 5px 20px;
}

.header {
  float: left;
  display: flex;
  justify-content: flex-start; /* 子元素靠左对齐 */
  padding: 10px 10px 0px 10px;
  align-items: baseline;
}

.title-name {
  font-size: 18px;
  font-weight: bold;
  width: 200px;
  height: 25px;
}

.number {
  margin-left: 10px;
  color: #8c8c8c;
  width: 200px;
}

.info {
  float: left;
  margin-bottom: 10px;
  width: 700px;
}

.nav-bar {
  display: flex;
  justify-content: flex-start; /* 子元素靠左对齐 */
  padding: 10px;
}

.create {
  margin-right: 15px; /* 设置子元素之间的间距为15px */
}

.work-info {
  margin: 20px;
}

.info-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.info-item {
  width: 40%; /* Adjust width as needed */
  margin-bottom: 10px;
}

.info-item span {
  margin-left: 10px;
}

.info-item span:first-child {
  font-family: '苹方 常规', '苹方', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #262626;
  text-align: left;
  line-height: 20px;
  display: inline-block;
  width: 90px;
}

.content {
  color: #8c8c8c;
  text-align: left;
}

.svg-img {
  margin-top: -30px;
}

.img-right {
  float: right;
  width: 80px;
  margin-top: -60px;
}

.row-name {
  width: 24.666667%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.work-info {
  margin: 20px;
}

.divider {
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中对齐 */
  margin: 20px 0; /* 上下外边距 */
}

.divider::before,
.divider::after {
  content: ''; /* 伪元素内容为空 */
  flex: 1; /* 伸展占据剩余空间 */
  border-top: 1px solid #d3d3d3; /* 灰色的上边线 */
}

.label {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #d3d3d3; /* 蓝色边框 */
  border-radius: 10px; /* 圆角 */
  background-color: #fff; /* 白色背景 */
  color: #1b9aee; /* 蓝色字体 */
  font-family: '苹方 常规', '苹方', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  text-align: center;
  line-height: 20px;
}

.el-descriptions .is-bordered {
  table-layout: fixed !important;
}

.task-content {
  margin-top: -15px;
  font-family: '苹方 常规', '苹方', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  color: #262626;
  text-align: left;
  line-height: 20px;
}

/* 假设所有 label 的最大宽度为 120px */
.el-descriptions-item__label {
  max-width: 120px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* 为内容部分设置适当的样式，保持与 label 的垂直对齐 */
.el-descriptions-item__content {
  /* 根据需要调整样式 */
}

/* 使用 Flexbox 布局来控制对齐（可选） */
.el-descriptions-item {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}
</style>
